<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'同步句子-句子拼写-学后测'"> </Breadcrumb>
        <RouterTabs :list="routerList" :current="1"> </RouterTabs>
        <view class="content">
          <SentenceTest2
            v-if="sentenceList.length > 0"
            :type="type"
            :sentenceList="sentenceList"
            :bookInfo="bookChapter"
            @back="handleBack"
            @save="handleSave"
          ></SentenceTest2>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { findSentence, testCommit } from "@/api/hearing";
export default {
  components: {},
  onLoad(option) {
    this.chapterId = option.chapterId;
    this.init();
  },
  data() {
    return {
      routerList: [
        {
          name: "句子听选",
          url: "pages/sentence/sentenceChoice",
        },
        {
          name: "句子拼写",
          url: "pages/sentence/sentenceTranslation",
        },
        {
          name: "句子跟读",
          url: "pages/sentence/sentenceRead",
        },
      ],
      type: 2,
      chapterId: "",
      sentenceList: [],
      bookInfo: null,
    };
  },
  methods: {
    init() {
      let params = {
        chapterId: this.chapterId,
        type: this.type,
      };
      findSentence(params).then((res) => {
        let sentences = res.data.sentences;
        sentences.forEach((item) => {
          item.randomWords = item.randomWords.filter(
            (item) => item.trim() !== ""
          );
          item.sentenceWords = item.sentenceWords.filter(
            (item) => item.trim() !== ""
          );
        });
        this.sentenceList = sentences;
        this.bookChapter = res.data.bookChapter;
      });
    },
    handleSave(score) {
      let params = {
        chapterId: this.chapterId,
        score: score,
        type: this.type,
      };
      testCommit(params);
    },
    handleBack() {
      uni.redirectTo({
        url: "/pages/sentence/sentenceTranslation",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./sentenceTranslationAfterSchool";
</style>
